<template>
	<view class="content">
		<view class="head flex-col flex-c">
			<image src="/static/ic_phonenumimg.png" mode="widthFix"></image>
			<text>绑定手机，让你的账号更安全</text>
		</view>
		<view class="field">
			<u-field v-model="phone" :disabled="bind" label="+86" placeholder="请填写手机号" :border-bottom="false">
			</u-field>
			<u-field v-model="code" label="验证码" placeholder="请填写验证码" :border-bottom="false">
				<view class="pwd" slot="right" @click="getcode">
					{{codeText}}
				</view>
			</u-field>
		</view>
		<button class="new-btn" @click="confirm">确定</button>
		<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				yzPhone: '',
				yzCode: '',
				codeText: '发送验证码',
				bind: false
			}
		},
		onLoad() {
			this.$store.dispatch('getuserinfo').then(res=>{
				if(res.phone){
					this.bind = true
					this.phone = res.phone
					uni.setNavigationBarTitle({
						title:'验证手机号'
					})
				}
			})
		},
		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			async confirm(){
				if (!this.code || this.code != this.yzCode || this.phone != this.yzPhone) {
					this.$u.toast('验证码不正确');
					return;
				}
				if(this.bind){
					this.bind = false
					this.code = ''
					this.yzCode = ''
					this.phone = ''
					this.yzPhone = ''
					this.$refs.uCode.reset();
					uni.setNavigationBarTitle({
						title:'修改手机号'
					})
					return false
				}
				const {data:res} = await this.$Request({
					url:'api/user/editInfo',
					data:{
						user_id: this.$store.state.userid,
						phone: this.phone
					}
				})
				if (res && res.code == 200) {
					this.$u.toast('修改手机成功');
					this.$store.commit('logout')
				} else {
					this.$u.toast(res.msg);
				}
			},
			async getcode() {
				if(this.bind) return this.sendcode()
				const {
					data: res
				} = await this.$Request({
					url: 'apis/home/user/sel',
					data: {
						phone: this.phone
					}
				})
				if (res.code != 200) {
					this.$u.toast(res.msg || '该手机号已被注册');
				} else {
					this.sendcode()
				}
			},
			async sendcode() {
				if(this.$refs.uCode.canGetCode) {
					var code = Math.floor(Math.random() * (999999 - 100000 + 1) + 100000);
					const {
						data: res
					} = await this.$Request({
						url: 'api/code/sms',
						data: {
							phone: this.phone,
							code: code
						}
					})
					console.log(res);
					this.$u.toast(res.msg);
					if (res && res.code == 200) {
						this.yzPhone = this.phone;
						this.yzCode = code;
						this.$refs.uCode.start();
					}
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/* #ifndef H5 */
		min-height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
		background-color: #2A2931;
		overflow: hidden;

		.head {
			padding: 60rpx 0 100rpx;

			image {
				width: 40vw;
			}

			text {
				color: #eee;
				margin-top: 30rpx;
			}
		}

		.field {
			margin: 60rpx 30rpx;

			.pwd {
				color: #A87B38;
			}

			/deep/.u-field {
				padding: 14px 20px;
				display: flex;
				align-items: center;
				position: relative;
				border-radius: 60px;
				margin-bottom: 30rpx;
				background: rgba(153, 149, 149, 0.466);

				.u-label-text {
					color: #A87B38;
				}

				input {
					color: #eee;
				}
			}
		}
	}
</style>
